<!--资源管理-->
<template>
  <div class='resourceList'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 表单区域(搜素信息) -->
        <el-form :inline="true" :model="form" ref="form" class="demo-form-inline">
          <el-row>
            <el-col :span="6">
              <el-form-item label="资源名称:" prop="name">
                <el-input v-model="form.name" size="small" placeholder="资源名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="资源路径:" prop="url">
                <el-input v-model="form.url" size="small" placeholder="资源路径"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="资源分类:" prop="categoryId">
                <el-select v-model="form.categoryId" size="small" clearable placeholder="资源分类">
                  <el-option
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button size="small" @click="resetForm">重置</el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="referResource"
                  :disabled="loading">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- button区域 (添加/资源分类)-->
      <slot name="btn"></slot>
      <!-- 表格区域 (资源信息展示)-->
      <el-table
        :data="resourceData"
        border
        v-loading="loading"
        style="width: 100%">
        <el-table-column
          type="index"
          label="编号"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="资源名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="url"
          label="资源路径"
          align="center">
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          align="center">
        </el-table-column>
        <el-table-column
          label="添加时间"
          align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createdTime | timeAmend }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button @click="resourceEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="getResourceDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 页码区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="form.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>

<script>
import { getResourcePages, getResourceCategory, getResourceDel } from '@/services/resource'
export default {
  name: 'resourceList',
  data () {
    return {
      form: {
        // 当前页
        current: 1,
        // 当前页的数据量
        size: 10
      },
      // 获取资源的列表信息
      resourceData: [],
      // 总条数
      totalCount: 0,
      // 分类列标
      categoryList: [],
      // 加载状态
      loading: false
    }
  },
  created () {
    this.getResourcePages()
    this.getResourceCategory()
  },
  filters: {
    timeAmend (val) {
      const date = new Date(val)
      function getDate (value) {
        if (value < 10) {
          return '0' + value
        }
        return value
      }
      return `
        ${date.getFullYear()}-${getDate(date.getMonth() + 1)}-${getDate(date.getDate())}
        ${getDate(date.getHours())}:${getDate(date.getMinutes())}:${getDate(date.getSeconds())}
      `
    }
  },
  methods: {
    // 请求按条件页分页查询资源
    async getResourcePages () {
      this.loading = true
      const { data } = await getResourcePages(this.form)
      this.loading = false
      if (data.code === '000000') {
        this.resourceData = data.data.records
        this.totalCount = data.data.total
      }
    },
    // 改变当前页的数据量
    handleSizeChange (val) {
      this.form.current = 1
      this.form.size = val
      this.getResourcePages()
    },
    // 改变当前的页数
    handleCurrentChange (val) {
      this.form.current = val
      this.getResourcePages()
    },
    // 获取当前的资源信息
    async getResourceCategory () {
      const { data } = await getResourceCategory()
      if (data.code === '000000') {
        this.categoryList = data.data
      }
    },
    // 查询
    referResource () {
      // 在每次搜索查询的时候都从第一页开始查询
      this.form.current = 1
      this.getResourcePages()
    },
    // 重置 使用表单提供的resetFields()重置表单,
    //      需要给表单添加ref属性,及每个表单项添加prop属性
    resetForm () {
      this.$refs.form.resetFields()
    },
    // 编辑(打开弹窗)
    resourceEdit (val) {
      // 将获取的id值传递过父组件,父组件接收后,
      // 再传递给addResource,获得对应数据后,渲染数据
      // 传递id值给父组件
      this.$emit('getlistId', val)
    },
    // 删除
    getResourceDel (id) {
      this.$confirm('确认删除吗?', '提示')
        .then(async () => {
          const { data } = await getResourceDel(id)
          if (data.code === '000000') {
            const index = this.resourceData.findIndex(item => item.id === id)
            this.resourceData.splice(index, 1)
          }
          this.$message.success('删除成功!')
        }).catch(() => {
          this.$message.info('已取消删除')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__body{
  padding: 20px 0 !important;
}
.el-table{
  margin-top: 20px !important;
}
.el-pagination{
  margin-top: 10px;
}
</style>
